<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: #2c3e50;
            -webkit-animation: background 24s infinite;
            animation: background 24s infinite;
        }
        @-webkit-keyframes background {
            16.66667% {
                background-color: #16a085;
            }
            33.33333% {
                background-color: #2980b9;
            }
            50% {
                background-color: #f39c12;
            }
            66.66667% {
                background-color: #c0392b;
            }
            83.33333% {
                background-color: #8e44ad;
            }
            100% {
                background-color: #2c3e50;
            }
        }
        @keyframes background {
            16.66667% {
                background-color: #16a085;
            }
            33.33333% {
                background-color: #2980b9;
            }
            50% {
                background-color: #f39c12;
            }
            66.66667% {
                background-color: #c0392b;
            }
            83.33333% {
                background-color: #8e44ad;
            }
            100% {
                background-color: #2c3e50;
            }
        }
        .container {
            position: absolute;
            left: 50%;
            bottom: 0;
            margin-left: -125px;
            width: 250px;
            height: 230px;
            -webkit-transform: scale(2);
            -ms-transform: scale(2);
            transform: scale(2);
            -webkit-transform-origin: center bottom;
            -ms-transform-origin: center bottom;
            transform-origin: center bottom;
        }
        .shape {
            position: absolute;
            bottom: 0;
            left: 50%;
            opacity: 0.2;
            background-color: white;
        }
        .triangle {
            margin-left: -50px;
            width: 100px;
            height: 80px;
            -webkit-clip-path: polygon(50% 100%, 0% 100%, 100% 100%);
            clip-path: polygon(50% 100%, 0% 100%, 100% 100%);
            -webkit-animation: triangle 1s linear forwards;
            animation: triangle 1s linear forwards;
        }
        @-webkit-keyframes triangle {
            100% {
                -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            }
        }
        @keyframes triangle {
            100% {
                -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            }
        }
        .square {
            margin-left: -50px;
            width: 100px;
            height: 100px;
            -webkit-clip-path: polygon(50% 100%, 50% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(50% 100%, 50% 100%, 100% 100%, 0% 100%);
            -webkit-animation: square 2s linear forwards;
            animation: square 2s linear forwards;
        }
        @-webkit-keyframes square {
            50% {
                -webkit-clip-path: polygon(50% 20%, 50% 20%, 100% 100%, 0% 100%);
                clip-path: polygon(50% 20%, 50% 20%, 100% 100%, 0% 100%);
            }
            100% {
                -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            }
        }
        @keyframes square {
            50% {
                -webkit-clip-path: polygon(50% 20%, 50% 20%, 100% 100%, 0% 100%);
                clip-path: polygon(50% 20%, 50% 20%, 100% 100%, 0% 100%);
            }
            100% {
                -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            }
        }
        .pentagon {
            margin-left: -80px;
            width: 160px;
            height: 150px;
            -webkit-clip-path: polygon(50% 100%, 50% 100%, 82% 100%, 18% 100%, 52% 100%);
            clip-path: polygon(50% 100%, 50% 100%, 82% 100%, 18% 100%, 52% 100%);
            -webkit-animation: pentagon 3s linear forwards;
            animation: pentagon 3s linear forwards;
        }
        @-webkit-keyframes pentagon {
            33.3% {
                -webkit-clip-path: polygon(50% 47%, 50% 47%, 81% 100%, 19% 100%, 50% 47%);
                clip-path: polygon(50% 47%, 50% 47%, 81% 100%, 19% 100%, 50% 47%);
            }
            66.6% {
                -webkit-clip-path: polygon(50% 34%, 81% 34%, 81% 100%, 19% 100%, 19% 34%);
                clip-path: polygon(50% 34%, 81% 34%, 81% 100%, 19% 100%, 19% 34%);
            }
            100% {
                -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
                clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
            }
        }
        @keyframes pentagon {
            33.3% {
                -webkit-clip-path: polygon(50% 47%, 50% 47%, 81% 100%, 19% 100%, 50% 47%);
                clip-path: polygon(50% 47%, 50% 47%, 81% 100%, 19% 100%, 50% 47%);
            }
            66.6% {
                -webkit-clip-path: polygon(50% 34%, 81% 34%, 81% 100%, 19% 100%, 19% 34%);
                clip-path: polygon(50% 34%, 81% 34%, 81% 100%, 19% 100%, 19% 34%);
            }
            100% {
                -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
                clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
            }
        }
        .hexagon {
            width: 200px;
            height: 170px;
            margin-left: -100px;
            -webkit-animation: hexagon 4s linear forwards;
            animation: hexagon 4s linear forwards;
            -webkit-clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%, 75% 100%, 25% 100%);
            clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%, 75% 100%, 25% 100%);
        }
        @-webkit-keyframes hexagon {
            25% {
                -webkit-clip-path: polygon(50% 52%, 50% 52%, 50% 52%, 50% 52%, 75% 100%, 25% 100%);
                clip-path: polygon(50% 52%, 50% 52%, 50% 52%, 50% 52%, 75% 100%, 25% 100%);
            }
            50% {
                -webkit-clip-path: polygon(25% 41%, 40% 41%, 55% 41%, 75% 41%, 75% 100%, 25% 100%);
                clip-path: polygon(25% 41%, 40% 41%, 55% 41%, 75% 41%, 75% 100%, 25% 100%);
            }
            75% {
                -webkit-clip-path: polygon(10% 45%, 50% 12%, 50% 12%, 90% 45%, 75% 100%, 25% 100%);
                clip-path: polygon(10% 45%, 50% 12%, 50% 12%, 90% 45%, 75% 100%, 25% 100%);
            }
            100% {
                -webkit-clip-path: polygon(0 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
                clip-path: polygon(0 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
            }
        }
        @keyframes hexagon {
            25% {
                -webkit-clip-path: polygon(50% 52%, 50% 52%, 50% 52%, 50% 52%, 75% 100%, 25% 100%);
                clip-path: polygon(50% 52%, 50% 52%, 50% 52%, 50% 52%, 75% 100%, 25% 100%);
            }
            50% {
                -webkit-clip-path: polygon(25% 41%, 40% 41%, 55% 41%, 75% 41%, 75% 100%, 25% 100%);
                clip-path: polygon(25% 41%, 40% 41%, 55% 41%, 75% 41%, 75% 100%, 25% 100%);
            }
            75% {
                -webkit-clip-path: polygon(10% 45%, 50% 12%, 50% 12%, 90% 45%, 75% 100%, 25% 100%);
                clip-path: polygon(10% 45%, 50% 12%, 50% 12%, 90% 45%, 75% 100%, 25% 100%);
            }
            100% {
                -webkit-clip-path: polygon(0 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
                clip-path: polygon(0 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
            }
        }
        .heptagon {
            width: 230px;
            height: 210px;
            margin-left: -115px;
            -webkit-animation: heptagon 5s linear forwards;
            animation: heptagon 5s linear forwards;
            -webkit-clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 72% 100%, 28% 100%);
            clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 72% 100%, 28% 100%);
        }
        @-webkit-keyframes heptagon {
            20% {
                -webkit-clip-path: polygon(50% 62%, 50% 62%, 50% 62%, 50% 62%, 50% 62%, 72% 100%, 28% 100%);
                clip-path: polygon(50% 62%, 50% 62%, 50% 62%, 50% 62%, 50% 62%, 72% 100%, 28% 100%);
            }
            40% {
                -webkit-clip-path: polygon(28% 52%, 50% 52%, 50% 52%, 50% 52%, 72% 52%, 72% 100%, 28% 100%);
                clip-path: polygon(28% 52%, 50% 52%, 50% 52%, 50% 52%, 72% 52%, 72% 100%, 28% 100%);
            }
            60% {
                -webkit-clip-path: polygon(15% 56%, 50% 29%, 50% 29%, 50% 29%, 85% 56%, 72% 100%, 28% 100%);
                clip-path: polygon(15% 56%, 50% 29%, 50% 29%, 50% 29%, 85% 56%, 72% 100%, 28% 100%);
            }
            80% {
                -webkit-clip-path: polygon(7% 59%, 28% 19%, 50% 19%, 72% 19%, 93% 59%, 71% 100%, 29% 100%);
                clip-path: polygon(7% 59%, 28% 19%, 50% 19%, 72% 19%, 93% 59%, 71% 100%, 29% 100%);
            }
            100% {
                -webkit-clip-path: polygon(0% 65%, 10% 20%, 50% 0%, 90% 20%, 100% 65%, 72% 100%, 28% 100%);
                clip-path: polygon(0% 65%, 10% 20%, 50% 0%, 90% 20%, 100% 65%, 72% 100%, 28% 100%);
            }
        }
        @keyframes heptagon {
            20% {
                -webkit-clip-path: polygon(50% 62%, 50% 62%, 50% 62%, 50% 62%, 50% 62%, 72% 100%, 28% 100%);
                clip-path: polygon(50% 62%, 50% 62%, 50% 62%, 50% 62%, 50% 62%, 72% 100%, 28% 100%);
            }
            40% {
                -webkit-clip-path: polygon(28% 52%, 50% 52%, 50% 52%, 50% 52%, 72% 52%, 72% 100%, 28% 100%);
                clip-path: polygon(28% 52%, 50% 52%, 50% 52%, 50% 52%, 72% 52%, 72% 100%, 28% 100%);
            }
            60% {
                -webkit-clip-path: polygon(15% 56%, 50% 29%, 50% 29%, 50% 29%, 85% 56%, 72% 100%, 28% 100%);
                clip-path: polygon(15% 56%, 50% 29%, 50% 29%, 50% 29%, 85% 56%, 72% 100%, 28% 100%);
            }
            80% {
                -webkit-clip-path: polygon(7% 59%, 28% 19%, 50% 19%, 72% 19%, 93% 59%, 71% 100%, 29% 100%);
                clip-path: polygon(7% 59%, 28% 19%, 50% 19%, 72% 19%, 93% 59%, 71% 100%, 29% 100%);
            }
            100% {
                -webkit-clip-path: polygon(0% 65%, 10% 20%, 50% 0%, 90% 20%, 100% 65%, 72% 100%, 28% 100%);
                clip-path: polygon(0% 65%, 10% 20%, 50% 0%, 90% 20%, 100% 65%, 72% 100%, 28% 100%);
            }
        }
        .octagon {
            width: 250px;
            height: 230px;
            margin-left: -125px;
            -webkit-animation: octagon 6s linear forwards;
            animation: octagon 6s linear forwards;
            -webkit-clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 72% 100%, 28% 100%);
            clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 72% 100%, 28% 100%);
        }
        @-webkit-keyframes octagon {
            16.66667% {
                -webkit-clip-path: polygon(50% 65%, 50% 65%, 50% 65%, 50% 65%, 50% 65%, 50% 65%, 70% 100%, 30% 100%);
                clip-path: polygon(50% 65%, 50% 65%, 50% 65%, 50% 65%, 50% 65%, 50% 65%, 70% 100%, 30% 100%);
            }
            33.33333% {
                -webkit-clip-path: polygon(30% 57%, 50% 57%, 50% 57%, 50% 57%, 50% 57%, 70% 57%, 70% 100%, 30% 100%);
                clip-path: polygon(30% 57%, 50% 57%, 50% 57%, 50% 57%, 50% 57%, 70% 57%, 70% 100%, 30% 100%);
            }
            50% {
                -webkit-clip-path: polygon(18% 60%, 50% 35%, 50% 35%, 50% 35%, 50% 35%, 82% 60%, 70% 100%, 30% 100%);
                clip-path: polygon(18% 60%, 50% 35%, 50% 35%, 50% 35%, 50% 35%, 82% 60%, 70% 100%, 30% 100%);
            }
            66.66667% {
                -webkit-clip-path: polygon(10% 63%, 30% 26%, 50% 26%, 50% 26%, 70% 26%, 90% 63%, 70% 100%, 30% 100%);
                clip-path: polygon(10% 63%, 30% 26%, 50% 26%, 50% 26%, 70% 26%, 90% 63%, 70% 100%, 30% 100%);
            }
            83.33333% {
                -webkit-clip-path: polygon(4% 68%, 13% 27%, 50% 9%, 50% 9%, 87% 27%, 96% 68%, 70% 100%, 30% 100%);
                clip-path: polygon(4% 68%, 13% 27%, 50% 9%, 50% 9%, 87% 27%, 96% 68%, 70% 100%, 30% 100%);
            }
            100% {
                -webkit-clip-path: polygon(0% 75%, 0% 30%, 30% 0%, 70% 0%, 100% 30%, 100% 75%, 70% 100%, 30% 100%);
                clip-path: polygon(0% 75%, 0% 30%, 30% 0%, 70% 0%, 100% 30%, 100% 75%, 70% 100%, 30% 100%);
            }
        }
        @keyframes octagon {
            16.66667% {
                -webkit-clip-path: polygon(50% 65%, 50% 65%, 50% 65%, 50% 65%, 50% 65%, 50% 65%, 70% 100%, 30% 100%);
                clip-path: polygon(50% 65%, 50% 65%, 50% 65%, 50% 65%, 50% 65%, 50% 65%, 70% 100%, 30% 100%);
            }
            33.33333% {
                -webkit-clip-path: polygon(30% 57%, 50% 57%, 50% 57%, 50% 57%, 50% 57%, 70% 57%, 70% 100%, 30% 100%);
                clip-path: polygon(30% 57%, 50% 57%, 50% 57%, 50% 57%, 50% 57%, 70% 57%, 70% 100%, 30% 100%);
            }
            50% {
                -webkit-clip-path: polygon(18% 60%, 50% 35%, 50% 35%, 50% 35%, 50% 35%, 82% 60%, 70% 100%, 30% 100%);
                clip-path: polygon(18% 60%, 50% 35%, 50% 35%, 50% 35%, 50% 35%, 82% 60%, 70% 100%, 30% 100%);
            }
            66.66667% {
                -webkit-clip-path: polygon(10% 63%, 30% 26%, 50% 26%, 50% 26%, 70% 26%, 90% 63%, 70% 100%, 30% 100%);
                clip-path: polygon(10% 63%, 30% 26%, 50% 26%, 50% 26%, 70% 26%, 90% 63%, 70% 100%, 30% 100%);
            }
            83.33333% {
                -webkit-clip-path: polygon(4% 68%, 13% 27%, 50% 9%, 50% 9%, 87% 27%, 96% 68%, 70% 100%, 30% 100%);
                clip-path: polygon(4% 68%, 13% 27%, 50% 9%, 50% 9%, 87% 27%, 96% 68%, 70% 100%, 30% 100%);
            }
            100% {
                -webkit-clip-path: polygon(0% 75%, 0% 30%, 30% 0%, 70% 0%, 100% 30%, 100% 75%, 70% 100%, 30% 100%);
                clip-path: polygon(0% 75%, 0% 30%, 30% 0%, 70% 0%, 100% 30%, 100% 75%, 70% 100%, 30% 100%);
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="octagon shape"></div>
    <div class="heptagon shape"></div>
    <div class="hexagon shape"></div>
    <div class="pentagon shape"></div>
    <div class="square shape"></div>
    <div class="triangle shape"></div>
</div>
</body>
</html>